<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        p{
            width: 100px;
            height: 100px;
            background-color: orange;
   
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        // 创建节点 
        // 创建元素节点   创建文本节点

        // document.createElement('元素名字')
        // document.createTextNode('文本内容')

        // 插入节点 
        // 插入到父元素内部的后面  
        // 父节点.appendChild(子节点);
        // 插入到父元素内部指定元素的前面
        // 父节点.insertBefore(子节点,谁的前面);

        // 删除节点 
        // 从父节点中删除 
        // 父节点.removeChild(子节点)

        // 自己删除自己
        // 子节点.remove()

        // 替换节点 
        // 父节点.replaceChild(换上的节点,换下的节点);


        // 克隆节点  
        // 节点.cloneNode(参数)
        // 默认是false 不克隆后代
        // true  可以自己也克隆后代 

        // 克隆的时候属性也会克隆 

        // 任何节点 都有三个属性 

        // nodeType 
            // 元素节点 1  属性节点 2  文本节点 3  注释节点   8   
        // nodeName 
          // 元素节点 标签名大写  属性节点 属性名 文本节点 #text  注释节点  #comment   
        // nodeValue 
            // 元素节点 null  属性节点 属性值 文本节点 文本本身  注释节点  注释内容   


        //事件三要素  
        // 事件源  绑定在谁的身上  
        // 事件类型 什么样的事件  
        // 事件处理函数  当行为发生 执行的函数  

        // 绑定和解绑  

        // dom0 dom2 

        // 事件源.on事件类型=事件处理函数   dom0的绑定方式 
        // 事件源.on事件类型=null;

        // dom2 
         // w3c浏览器 
         // 事件源.addEventListener('事件类型',事件处理函数);
        //  事件源.removeEventListener('事件类型',要解绑的事件函数);
        // 同一个事件源同一个事件类型可以绑定多个事件处理函数 
        // 顺序绑定  顺序执行 

        // 兼容性 

        // 1卷取的高度 
        // 2.事件绑定 解绑 
        //      不同浏览器不一样  
            //   // 事件源.attachEvent('on+事件类型',事件处理函数);
                 //  事件源.detachEvent('on+事件类型',要解绑的事件函数);
                 // 顺序绑定 倒序执行  
    </script>

    <script>
        var divele = document.querySelector('div');

        // divele.onclick = function(){
        //     alert('单击')
        // }


        // divele.ondblclick = function(){
        //     alert('双击')
        // }

        // divele.oncontextmenu = function(){
        //     alert('右键单击')
        // }

        // divele.onmousedown = function(){
        //     alert('鼠标按下不动')
        // }


        // divele.onmouseup = function(){
        //     alert('鼠标按下然后抬起来才触发')
        // }


        // divele.onmousemove= function(){
        //     console.log('鼠标移动')
        // } // 移动一秒  60次左右

        // divele.onmouseover= function(){
        //     console.log('进入')
        // } 

        // divele.onmouseout= function(){
        //     console.log('出去')
        // } 


        divele.onmouseenter= function(){
        //     console.log('进入')
        // } 

        // divele.onmouseleave= function(){
        //     console.log('出去')
        } 
    </script>
</body>
</html>